<template>
    <div id="temp">
        <div class="stuInfo">
            <div class="tit">
                <span>办公用品详情</span>
                <span class="icon" @click="editOffice()"></span>
            </div>
            <el-row>
                <el-col :span="7">
                    <div>
                        <el-col :span="10">
                            <span class="left">类别：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{office.type}}</span>
                        </el-col>
                    </div>
                    <div>
                        <el-col :span="10">
                            <span class="left">名称：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{office.asset_name}}</span>
                        </el-col>
                    </div>
                </el-col>
                <el-col :span="7">
                    <div>
                        <el-col :span="10">
                            <span class="left">资产编号：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{office.asset_num}}</span>
                        </el-col>
                    </div>
                    <div>
                        <el-col :span="10">
                            <span class="left">存放位置：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{office.location}}</span>
                        </el-col>
                    </div>
                </el-col>
                <el-col :span="7">
                    <div>
                        <el-col :span="10">
                            <span class="left">现货存量：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{office.inventory}}</span>
                        </el-col>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="record">
            <el-tabs type="border-card" @tab-click="formChange" activeName="purchase">
                <el-tab-pane label="采购记录" name="purchase">
                    <table class="tab-table">
                        <thead>
                        <tr>
                            <th width="10%">
                                <el-button type="text" @click="openAdd('purchase')"><span class="icon add"></span>
                                </el-button>
                            </th>
                            <th width="5%">序号</th>
                            <th>物品名称</th>
                            <th>规格型号</th>
                            <th>单位</th>
                            <th>数量</th>
                            <th>单价</th>
                            <th>总价</th>
                            <th>负责人</th>
                            <th>备注</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in list" :key="item.id">
                            <td>
                                <span class="icon edit" @click="edit(item.id,'purchase')"></span>
                                <span class="icon del" @click="Del(item.id,'purchase')"></span>
                            </td>
                            <td>{{index + 1}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.specification}}</td>
                            <td>{{item.unit}}</td>
                            <td>{{item.quantity}}</td>
                            <td>{{item.price}}</td>
                            <td>{{item.quantity * item.price}}</td>
                            <td>{{item.principal}}</td>
                            <td>{{item.comment}}</td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="库存管理" name="inventory">
                    <table class="tab-table">
                        <thead>
                        <tr>
                            <th width="10%">
                                <el-button type="text" @click="openAdd('inventory')"><span class="icon add"></span>
                                </el-button>
                            </th>
                            <th width="5%">序号</th>
                            <th>上月结存</th>
                            <th>本月入库</th>
                            <th>现库存量</th>
                            <th>本月耗用</th>
                            <th>用途</th>
                            <th>库存价值</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in list" :key="item.id">
                            <td>
                                <span class="icon edit" @click="edit(item.id,'inventory')"></span>
                                <span class="icon del" @click="Del(item.id,'inventory')"></span>
                            </td>
                            <td>{{index + 1}}</td>
                            <td>{{item.last_month}}</td>
                            <td>{{item.month_entrance}}</td>
                            <td>{{item.now}}</td>
                            <td>{{item.current_month}}</td>
                            <td>{{item.purpose}}</td>
                            <td>{{item.value}}</td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog title="办公用品信息" :visible.sync="pop" size="tiny">
            <el-form :model="addForm" :label-width="width" :rules="officeRules" ref="officeRulesName">
                <el-form-item label="资产编号" prop="asset_num">
                    <el-col :span="span">
                        <el-input v-model="addForm.asset_num" size="small" placeholder="请输入资产编号"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="资产名称" prop="asset_name">
                    <el-col :span="span">
                        <el-input v-model="addForm.asset_name" size="small" placeholder="请输入资产名称"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="存放位置">
                    <el-col :span="span">
                        <el-select v-model="addForm.location" placeholder="请选择">
                            <el-option v-for="item in location" :label="item" :value="item" :key="item"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="类型">
                    <el-col :span="span">
                        <el-input v-model="addForm.type" size="small" placeholder="请输入类型"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="现库存量">
                    <el-col :span="span">
                        <el-input v-model="addForm.inventory" size="small" placeholder="请输入现库存量"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="pop = false">取 消</el-button>
                <el-button type="primary" @click="changeOffice()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="采购记录" :visible.sync="purchasePop" size="tiny">
            <el-form :model="purchaseAdd" :label-width="width" :rules="purchaseRules" ref="purchaseRulesName">
                <el-form-item label="物品名称">
                    <el-col :span="span">
                        <el-input v-model="purchaseAdd.name" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="规格型号">
                    <el-col :span="span">
                        <el-input v-model="purchaseAdd.specification" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="单位">
                    <el-col :span="span">
                        <el-input v-model="purchaseAdd.unit" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="数量" prop="quantity">
                    <el-col :span="span">
                        <el-input v-model="purchaseAdd.quantity" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="单价">
                    <el-col :span="span">
                        <el-input v-model="purchaseAdd.price" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="负责人" prop="principal">
                    <el-col :span="span">
                        <el-input v-model="purchaseAdd.principal" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="备注">
                    <el-col :span="span">
                        <el-input v-model="purchaseAdd.comment" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="purchasePop = false">取 消</el-button>
                <el-button type="primary" @click="change('purchase')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="库存管理记录" :visible.sync="inventoryPop" size="tiny">
            <el-form :model="inventoryAdd" :label-width="width" :rules="inventoryRules" ref="inventoryRulesName">
                <el-form-item label="上月结存">
                    <el-col :span="span">
                        <el-input v-model="inventoryAdd.last_month" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="本月入库">
                    <el-col :span="span">
                        <el-input v-model="inventoryAdd.month_entrance" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="现库存量" prop="now">
                    <el-col :span="span">
                        <el-input v-model="inventoryAdd.now" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="本月耗用">
                    <el-col :span="span">
                        <el-input v-model="inventoryAdd.current_month" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="用途">
                    <el-col :span="span">
                        <el-input v-model="inventoryAdd.purpose" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="库存价值" prop="value">
                    <el-col :span="span">
                        <el-input v-model="inventoryAdd.value" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="inventoryPop = false">取 消</el-button>
                <el-button type="primary" @click="change('inventory')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import '../../../assets/css/info.css'

    const office = {
        asset_num: '',
        type: '',
        asset_name: '',
        location: '',
        inventory: ''
    };
    const purchase = {
        name: '',
        specification: '',
        unit: '',
        quantity: '',
        price: '',
        principal: '',
        comment: ''
    };
    const inventory = {
        last_month: '',
        month_entrance: '',
        now: '',
        current_month: '',
        purpose: '',
        value: ''
    };
    export default {
        data() {
            return {
                width: '200px',
                span: 15,
                id: '',
                list: {},
                office: {},
                location: ['三楼仓库', '八楼仓库', '八楼存储柜'],

                pop: false,
                addForm: _g.cloneJson(office),
                officeRules: {
                    asset_name: [{required: true, message: "请填写资产名称", trigger: "blur"}],
                    asset_num: [{required: true, message: "请填写资产编号", trigger: "blur"}]
                },

                purchasePop: false,
                purchaseAdd: _g.cloneJson(purchase),
                purchaseRules: {
                    principal: [{required: true, message: "请填写负责人", trigger: "blur"}],
                    quantity: [{required: true, message: "请填写数量", trigger: "blur"}]
                },

                inventoryPop: false,
                inventoryAdd: _g.cloneJson(inventory),
                inventoryRules: {
                    now: [{required: true, message: "请填写现库存", trigger: "blur"}],
                    value: [{required: true, message: "请填写价值", trigger: "blur"}]
                },
            }
        },

        created() {
            this.id = this.$route.params.id;
            this.getDetail();
            this.getList('purchase');
        },

        methods: {
            formChange(item) {
                this.getList(item.name);
            },

            /* 获取数据 */
            getList(action) {
                let data = {pid: this.id};
                this.apiPost("Operation/office" + action, data).then(res => {
                    this.list = res;
                });
            },
            getDetail() {
                let data = {id: this.id};
                this.apiPost("Operation/officeDetail", data).then(res => {
                    this.office = res;
                });
            },

            /* 提交数据 */
            changeOffice() {
                this.$refs.officeRulesName.validate(valid => {
                    if (valid) {
                        this.pop = false;
                        let data = this.addForm;
                        this.apiPost("Operation/officeEdit", data).then(res => {
                            let remind = res.error ? "error" : "success";
                            _g.toastMsg(remind, res.msg);
                            if (!res.error) {
                                this.getDetail();
                            } else {
                                this.pop = true;
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            change(action) {
                this.$refs[action + 'RulesName'].validate(valid => {
                    if (valid) {
                        this[action + 'Pop'] = false;
                        let data = this[action + 'Add'];
                        data.pid = this.id;
                        this.apiPost("Operation/office" + action + "Edit", data).then(res => {
                            let remind = res.error ? "error" : "success";
                            _g.toastMsg(remind, res.msg);
                            if (!res.error) {
                                this.getList(action);
                            } else {
                                this[action + 'Pop'] = true;
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },

            /* 删除 */
            Del(id, action) {
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        let data = {id: id};
                        this.apiPost("Operation/house" + action + "Delete", data).then(res => {
                            if (!res.error) {
                                this.$message({
                                    type: "success",
                                    message: res.msg
                                });
                            } else {
                                this.$message({
                                    type: "error",
                                    message: res.msg
                                });
                            }
                            this.getList(action);
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            },

            /* 打开新增窗口 */
            openAdd(action) {
                this[action + 'Add'] = _g.cloneJson(eval(action));
                this[action + 'Pop'] = true;
                this.$refs[action + 'RulesName'].resetFields();
            },

            /* 打开编辑窗口 */
            edit(id, action) {
                let data = {id: id};
                this.apiPost('Operation/office' + action + 'Detail', data).then(res => {
                    setTimeout(() => {
                        this[action + 'Pop'] = true;
                        setTimeout(() => {
                            this.$refs[action + 'RulesName'].resetFields();
                            this[action + 'Add'] = res;
                        }, 0);
                    }, 0);
                })
            },
            editOffice() {
                let data = {id: this.id};
                this.apiPost('Operation/officeDetail', data).then(res => {
                    setTimeout(() => {
                        this.pop = true;
                        setTimeout(() => {
                            this.$refs.officeRulesName.resetFields();
                            this.addForm = res;
                        }, 0);
                    }, 0);
                })
            },
        },
    }
</script>

<style scoped>
    .stuInfo {
        margin-bottom: 20px;
    }

    .headPic img {
        margin-left: 50px;
        width: 50%;
    }

    .add {
        width: 25px;
        height: 25px;
    }
</style>